<template>
    <div>
        <h1>用户管理</h1>
        <el-button @click="addUserButtonClick">添加用户</el-button>
        <el-table :data="sysUserStore.sysUsers" stripe>
            <el-table-column prop="username" label="姓名" sortable></el-table-column>
            <el-table-column prop="userId" label="学工号" sortable></el-table-column>
            <el-table-column prop="role" label="角色" sortable></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="editUser(scope.$index)">编辑</el-button>
                    <el-button @click="deleteUser(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="sysUserStore.currentPage" :page-size="sysUserStore.pageSize"
            :total="sysUserStore.total" @current-change="handleCurrentChange" layout="total, prev, pager, next" />
        <el-dialog v-model="addUserModal" title="添加用户">
            <el-form :rules="rules" :model="userForm" ref="userFormRef" label-width="80px">
                <el-form-item label="学工号" prop="userId">
                    <el-input v-model="userForm.userId"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="userForm.password"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-select v-model="userForm.role" placeholder="选择角色" size="large" style="width: 240px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

            </el-form>
            <template #footer>
                <el-button @click="addUserModal = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useSysUserStore } from '../stores/sysUser';
import { ElButton, ElTable, ElTableColumn, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';

import type { FormInstance, FormRules } from 'element-plus'
const isEditing = ref(false); // 标记是否处于编辑状态
const currentEditIndex = ref(-1); // 记录当前编辑条目的索引

const options = [
    { label: '管理员', value: '管理员' },
    { label: '教师', value: '教师' },
    { label: '学生', value: '学生' } 
]

const sysUserStore = useSysUserStore();
const addUserModal = ref(false);
const userForm = ref({
    username: '',
    userId: '',
    role: '男',
    password: ''
});



const rules = reactive<FormRules<typeof userForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    role: [
        { required: true, message: '请选择角色', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请设置一个密码', trigger: 'blur' }
    ],
    userId: [
        { required: true, message: '请输入学工号', trigger: 'blur' },

    ]
});

const userFormRef = ref<FormInstance>();

const addUserButtonClick = () => {
    addUserModal.value = true;
    isEditing.value = false;
    userForm.value = {
        username: '',
        userId: '',
        password: '',
        role: ''
    };
};


const submitForm = async () => {
    await nextTick();
    userFormRef.value?.validate(async (valid) => {
        if (valid) {
            if (isEditing.value) {
                // 更新课程信息
                await sysUserStore.updateSysUser(currentEditIndex.value, userForm.value);
            } else {
                await sysUserStore.addSysUser(userForm.value);
            }
            addUserModal.value = false;
            isEditing.value = false;
            userForm.value = {
                username: '',
                role: '男',
                password: '',
                userId: ''
            };
        }
    });
};



const editUser = (index: number) => {
    isEditing.value = true;
    currentEditIndex.value = index;
    addUserModal.value = true;
    // 将选中条目的信息回显到对话框中
    userForm.value = { ...sysUserStore.sysUsers[index] };
};

const handleCurrentChange = (page: number) => {
    sysUserStore.changePage(page);
};

const deleteUser = (index: number) => {
    sysUserStore.deleteSysUser(index);
};
</script>